<template>
  <div class="main-box">
    <!-- 居中盒子 -->
    <div class="center-box">

      <!-- 用户信息完整box -->
      <div class="user-box">
        <!-- 用户头box -->
        <div class="user-top">
          <img :src="userStore.userInfo.profilePic"/>
          <div class="user-top-right">
            <span class="user-name">{{ userStore.userInfo.nickName }}</span>
            <span class="updata-button" @click="showModal = true">修改个人信息</span>
          </div>
        </div>
        <div class="user-info">
          <!-- 用户描述列表 -->
          <div class="user-info-left">
            <span>账号：{{ userStore.userInfo.userName }}</span>
            <span>邮箱：{{ userStore.userInfo.email }}</span>
          </div>
          <div class="user-info-right">
            <span>昵称：{{ userStore.userInfo.nickName }}</span>
            <span>
              账号类型：{{ userStore.userInfo.role }}
              <span v-if="userStore.userInfo.role == '学生'" class="jssq" @click="showModal1=true">[ 教师申请 ]</span>
            </span>
            
          </div>
        </div>
      </div>
      <el-divider border-style="dashed" />
      <!--  -->
      <div style="margin-top: 20px;">
        <!-- 可以加用户收藏 等，先这样先，查看成绩等 -->
      </div>
    </div>

  </div>

<!-- 修改个人信息弹窗 -->
<n-modal v-model:show="showModal">
      <n-card style="width: 600px" title="修改个人信息" role="dialog" aria-modal="true">
        <!-- 关闭框 -->
        <template #header-extra>
          <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
        </template>
        <!-- 主要内容 -->
        <div class="alter">
          <!-- 修改头像 -->
          <div @click="onUploadImg()" class="alter-img">
            <el-tooltip effect="light" content="点击选择图片" placement="left">
              <img v-if="imageUrl" :src="imageUrl" class="avatar-uploader-icon" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-tooltip>
          </div>
          <!-- 修改昵称 -->
          <div class="alter-name">
            <span>昵称:</span>
            <n-input type="text" v-model:value="nickName" placeholder="请输入要修改的昵称" maxlength="10" show-count clearable />
          </div>
        </div>
        <!-- 提交按钮 -->
        <template #footer>
          <div style="display: flex;justify-content: flex-end;">
            <el-button @click="onUpUserData()">提交</el-button>
          </div>
        </template>
      </n-card>
    </n-modal>

<!-- 教师申请弹窗 -->
<n-modal v-model:show="showModal1">
      <n-card style="width: 600px" title="申请成为教师" role="dialog" aria-modal="true">
        <!-- 关闭框 -->
        <template #header-extra>
          <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal1 = false">
        </template>
        <!-- 主要内容 -->
        <div class="alter">
          <n-input type="textarea" v-model:value="applyText" maxlength="50" show-count clearable ></n-input>
        </div>
        <!-- 提交按钮 -->
        <template #footer>
          <div style="display: flex;justify-content: flex-end;">
            <el-button @click="onUpApplyText()">提交</el-button>
          </div>
        </template>
      </n-card>
    </n-modal>



</template>

<script setup>
import { upalterUserInfo } from "@/api/filesHttp";
import { ref } from "vue";
import useUserStore from "@/stores/useUserStore";
const userStore = useUserStore();
import { Plus } from '@element-plus/icons-vue'
import { openInfo } from "@/utils/openInfo";
import userHttp from "@/api/userHttp";

//是否开启弹窗
const showModal = ref(false)
const showModal1 = ref(false)
const applyText = ref("")
//修改昵称输入框
const nickName = ref(userStore.userInfo.nickName)
// 页面上展示的图片
const imageUrl = ref(userStore.userInfo.profilePic)

//用户上传的头像图片文件
const imgFile = ref()
/* 图片文件上传事件 */
function onUploadImg() {
  const inputEl = document.createElement("input"); //创建input元素
  inputEl.type = "file"; //数据类型
  inputEl.accept = "image/*"; // 可以设置接受的文件类型，例如'*/*'表示任何类型
  inputEl.multiple = false; // 设置只能选择一个文件
  inputEl.click(); //点击元素
  inputEl.addEventListener("change", function () {
    //用户选中的文件
    imgFile.value = inputEl.files[0];
    // 如果选择了图片 选中文件后展示到页面
    if (imgFile.value) {
      const reader = new FileReader();
      reader.onload = (e) => {
        //转换为baase 64的图片展示到选项框
        imageUrl.value = e.target.result;
      };
      reader.readAsDataURL(imgFile.value);
    }
  })
}

// 点击上传用户数据
function onUpUserData() {
  if (imageUrl.value == userStore.userInfo.profilePic && nickName.value == userStore.userInfo.nickName) {
    openInfo("修改内容后再点提交吧。")
  } else {
    // 创建From对象装图片file
    const filesForm = new FormData();
    filesForm.append("file", imgFile.value);
    filesForm.append("nickName",nickName.value);
    filesForm.append("userId", userStore.userInfo.userId);
    upalterUserInfo(filesForm).then((res) => {
      if (res.code == 200) {
        //更新数据 用户展示的
        userStore.userInfo.nickName = res.data.nickName
        nickName.value==res.data.nickName
        //如果修改了图片才有profilePic的返回给前端 
        if(res.data.profilePic){
          userStore.userInfo.profilePic = res.data.profilePic
          imageUrl.value = res.data.profilePic
        }
        openInfo("修改成功", 'success')
      } else {
        openInfo("修改失败", 'error')
      }
    })
  }
  showModal.value =false
}

//提交成为老师的申请
function onUpApplyText(){
  const from ={
    text:applyText.value,
    userId:userStore.userInfo.userId
  }
if(from.text == ''){
  openInfo("请先提交申请说明")
}else{
  userHttp.upApplyText(from).then((res)=>{
    if (res.code == 200) {
      openInfo(res.msg)
      showModal1.value =false
    }
  })
}


}

</script>
<style scoped>
/* 最大box 背景 */
.main-box {
  width: 100%;
  height: 1000px;
  margin-top: 10px;
  border-radius: 15px;
  /* background: linear-gradient(to left,rgb(147, 229, 195,0.2), rgba(93, 194, 56, 0.3)); */
  display: flex;
  justify-content: center;
}

/* 中间 */
.center-box {
  width: 80%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}
.jssq{
  cursor: pointer;
  background-color: rgb(218, 214, 214,0.4);
  padding: 4px;
  border-radius: 5px;
}
.jssq:hover{
  background-color: #fff;
  border: 1px rgb(171, 163, 163) solid;
}
/**用户展示盒子 */
.user-box {
  height: 200px;
  display: flex;
  flex-direction: column;
}

/* 用户头像 -用户名 修改个人信息栏目 */
.user-top {
  display: flex;
  align-items: flex-start;
}

/* 用户头像 */
.user-top img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  padding: 5px;
  cursor: pointer;
  transition: transform 0.4s ease-in-out;
}

.user-top img:hover{
  transform: scale(1.5) rotate(360deg); /* 旋转360度 */
  transition: transform 1s; /* 添加过渡效果 */
}
/* 用户名以及修改用户信息按钮 */
.user-top-right {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}

/**用户名 */
.user-name {
  font-family: "楷体";
  font-size: 30px;
  font-style: italic;
  -webkit-text-fill-color: #79dfec;
  cursor: pointer;
}

/* 修改个人信息按钮*/
.updata-button {
  margin-top: 15px;
  font-size: 10px;
  cursor: pointer;
  color: rgb(0, 0, 0, 0.4);
  padding: 5px;
  border-radius: 10px;
  user-select: none;
}

.updata-button:hover {
  color: rgb(0, 0, 0, 0.6);
  background-color: rgb(207, 195, 195, 0.2);
}

/* 用户信息 */
.user-info {
  margin-top: 10px;
  padding: 10px;
  height: 100%;
  display: flex;
  border-radius: 10px;
  background-color: rgba(246, 243, 243, 0.3);

}

/*左信息 */
.user-info-left {

  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /**内容高度平均分 */
}


/* 右信息 */
.user-info-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /**内容高度平均分 */
}

/* 关闭弹窗键 */
.deleye-img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.deleye-img:hover {
  transform: scale(1.2);
}



/* 修改弹窗---------------------------------------- */
.alter {
  display: flex;
  align-items: center
}

/**修改昵称 */
.alter-name {
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 修改图片 */
.alter-img {
  max-width: 180px;
}

/**修改昵称 */
.alter-name span {
  min-width: 35px;
  margin-right: 10px;
}

/* 修改图片框以及默认框的大小 */
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  max-width: 178px;
  min-width: 178px;
  min-height: 178px;
  max-height: 178px;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
  border: 1px rgb(62, 164, 156, 0.2) solid;
  transition: border 0.3s ease;
}

.avatar-uploader-icon:hover {
  border: 1px rgb(62, 164, 156) solid;
}

</style>